<template>
    <div class="table_container">
        <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
        <ZwTable
            ref="tableRef"
            class="table-box"
            tab-h="initial"
            :option="tableOption"
            :fetch-params="state.searchParams"
            :fetch-api="fetch()"
            :row-key="getRowKey">
            <template #headerOperate>
                <el-button @click="router.push('/customer/clubManage/commonSea/importDetail')">导入记录</el-button>
                <el-dropdown style="margin-left: 10px">
                    <el-button type="primary">
                        添加线索<el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="personAdd">单个添加</el-dropdown-item>
                            <el-dropdown-item @click="isopenBatch = true">批量导入</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </ZwTable>
        <Dialog :app-dialog="appDialog">
            <div class="allcontent">
                <div class="content">
                    <div :class="[clubChoose == 1 ? 'column both' : 'column']" @click="clubChoose = 1">
                        <img src="@/assets/customer/person.png" /><span class="text">个人线索</span>
                    </div>
                    <div :class="[clubChoose == 2 ? 'column both' : 'column']" @click="clubChoose = 2">
                        <img src="@/assets/customer/customer.png" /><span class="text">企业线索</span>
                    </div>
                </div>
            </div>
            <div class="tips">
                <el-checkbox v-model="ischecked">勾选之后，将不再提醒</el-checkbox>
            </div>
        </Dialog>
        <NewClub
            :open="open"
            :seas_id="props.seas_id"
            :rowid="rowid"
            :is-edit="isEdit"
            @close="closeNewClub"
            @submit="submitData"
            @togger="onToggleType"></NewClub>
        <AddBatch :isopen="isopenBatch" :seas_id="props.seas_id" @close="isopenBatch = false" @submit="onAddBatch">
        </AddBatch>
        <Dialog :app-dialog="secondDialog">
            <div class="dialog_content">{{ alertTips }}</div>
        </Dialog>
        <ZWCustomerType ref="ZWCustomerTypeRef" :type-name="['个人线索', '企业线索']" @submit="openDialogType" />
        <!-- 企业客户 -->
        <AddEnterprise ref="AddEnterpriseRef" @submit="onAddEnterprise" @toggle="onToggleType" />
    </div>
</template>
<script setup lang="tsx">
import ZWCustomerType from '@/components/ZWCustomerType.vue';
import AddEnterprise from './AddEnterprise.vue';
import { ref, reactive, computed, onMounted } from 'vue';
import { ElLoading, ElMessage } from 'element-plus';
import ZwTable from '@/components/zw/table/Table';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import Dialog from '@/components/Dialog.vue';
import NewClub from './NewClub.vue';
import AddBatch from './AddBatch.vue';

import { abandonList, setSettings, getSettings, delData } from '@/api/customer/clubManage/commonSea';
import { deepCopy } from '@/utils/helper';
import router from '@/router';
const tableRef = ref<HTMLElement | null>(null);
const props = defineProps(['seas_id']);
const defaultParams = {};
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const open = ref(false);
const ischecked = ref(false);
const clubChoose = ref(0);
const isopenBatch = ref(false); //判断批量添加弹框是否打开
const rowid = ref(null); //行线索id
const isEdit = ref(false); //点击新增个人线索打开新增线索为false 表格操作栏点击编辑为false
const cancelHandel = () => {
    appDialog.visible = false;
};
const submitHandel = () => {
    if (!clubChoose.value) {
        ElMessage.warning('请选择线索类型');
    } else if (clubChoose.value == 1) {
        // 选择个人类型
        setClub(clubChoose.value);
        appDialog.visible = false;
        open.value = true;
    } else {
        // 选择客户类型
        setClub(clubChoose.value);
    }
};
const getRowKey = (row: any) => {
    return row.id;
};
const setClub = (data: any) => {
    setSettings({ clue_type: data, remember: ischecked.value });
};
const appDialog = reactive({
    visible: false,
    title: '选择线索类型',
    width: '500px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
});
const alertTips = ref('');
const submitSecond = () => {
    delData({ clue_list: [rowid.value] }).then(res => {
        secondDialog.visible = false;
        ElMessage.success('删除成功');
        tableRef.value.reload();
        tableRef.value.clearSelection();
    });
};
const cancelSecond = () => {
    secondDialog.visible = false;
};
const secondDialog = reactive({
    visible: false,
    title: '删除提醒',
    width: '500px',
    cancel: cancelSecond,
    submit: submitSecond,
    cancelText: '取消',
    submitText: '确定'
});
const tableOption = [
    {
        type: 'selection',
        width: 55,
        fixed: 'left',
        reserveSelection: true
    },
    {
        prop: 'mobile',
        label: '手机号',
        width: 200
    },
    {
        prop: 'name',
        label: '线索名称',
        width: 120
    },
    {
        label: '联系人',
        prop: 'contacts',
        width: 200,
        render({ row, column, index }) {
            return (
                <div>
                    <div v-show={row.corp_contact?.length < 1}>--</div>
                    <div v-show={row.corp_contact?.length > 0} class="corp_contact">
                        {row.corp_contact.map(item => {
                            return <div>{item.name}</div>;
                        })}
                    </div>
                </div>
            );
        }
    },
    {
        prop: 'work_user_name',
        label: '原归属员工',
        width: 200
    },
    {
        prop: 'invalid_msg',
        label: '放弃原因',
        width: 200
    },
    {
        prop: 'operation_user_name',
        label: '操作人',
        width: 200
    },
    {
        prop: 'invalid_time',
        label: '放弃时间',
        minWidth: 200
    },

    {
        prop: 'operate',
        label: '操作',
        width: 110,
        fixed: 'right',
        isOperate: true,
        option: [
            {
                id: 0,
                name: '删除',
                click: row => {
                    alertTips.value = '您确定要删除' + row.name + '吗？';
                    secondDialog.visible = true;
                    rowid.value = row.id;
                }
            }
        ]
    }
];
const searchOption = computed(() => {
    return [
        {
            label: '线索名称',
            name: 'name',
            value: '',
            type: 'input',
            placeholder: '请输入线索名称搜索'
        },
        {
            label: '线索手机',
            name: 'phone',
            value: '',
            type: 'input',
            placeholder: '请输入线索手机号搜索'
        },
        {
            label: '放弃时间',
            name: 'create_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
        },
        {
            label: '线索类型',
            name: 'type',
            value: '',
            type: 'select',
            placeholder: '全部',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    resolve([
                        { name: '个人线索', id: 1 },
                        { name: '企业线索', id: 2 }
                    ]);
                });
            },
            formatOption: v => ({
                label: v.name,
                value: v.id
            })
        }
    ];
});
const getids = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(props.seas_id);
        }, 1);
    });
};
const fetch = async () => {
    // 获取文件列表
    const seas_id = await getids();
    if (!seas_id) return;
    return [{ seas_id }, abandonList];
};

//查询
const search = v => {
    tableRef.value.getTable().clearSelection();
    state.searchParams = v;
};
const closeNewClub = () => {
    open.value = false;
};
//清空
const reset = () => {
    tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy(defaultParams);
};
const ZWCustomerTypeRef = ref<any>(null);
const AddEnterpriseRef = ref<any>(null);
const onToggleType = (v: any) => {
    ZWCustomerTypeRef.value.visible = true;
};
const openDialogType = (v: any) => {
    if (v == 1) {
        AddEnterpriseRef.value.drawerData.visible = false;
        isEdit.value = false;
        open.value = true;
    } else {
        isEdit.value = false;
        open.value = false;
        AddEnterpriseRef.value.drawerData.clue_seas_id = props.seas_id;
        AddEnterpriseRef.value.drawerData.visible = true;
    }
};
const personAdd = () => {
    open.value = false;
    const status: any = localStorage.getItem('clueType');
    if (status) {
        if (status == 1) {
            openDialogType(1);
        } else {
            openDialogType(2);
        }
    } else {
        ZWCustomerTypeRef.value.visible = true;
    }
};
const submitData = () => {
    open.value = false;
    tableRef.value.reload();
    tableRef.value?.clearSelection();
};
// 批量导入成功事件
const onAddBatch = () => {
    tableRef.value.reload();
    tableRef.value?.clearSelection();
};
// 单个添加企微
const onAddEnterprise = () => {
    tableRef.value.reload();
    tableRef.value?.clearSelection();
};
</script>
<style scoped lang="scss">
.table_container {
    height: calc(100vh - 297px);
    display: flex;
    flex-direction: column;

    .zw-table {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        :deep(.el-table) {
            flex: 1;

            .el-table__empty-block {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

.allcontent {
    padding: 24px 38px;
}

.content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .both {
        border: 1px solid #ff6b00 !important;
    }

    .column {
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #eaeaea;
        border-radius: 4px;
        padding: 22px 40px;

        .text {
            margin-top: 11px;
            font-weight: 500;
            color: #33302d;
        }
    }
}
</style>
